<template lang="html">
  <div class="container">
    <div>
      <movie-index-header></movie-index-header>
    </div>
    <div class="userMessage">
      <user-message></user-message>
    </div>
    <div  class="contentPic">
      <index-header-pic v-for="recommend in headerItems" :key="recommend._id" :recommendImg="recommend.recommendImg"
                        :recommendSrc="recommend.recommendSrc" :recommendTitle="recommend.recommendTitle">
      </index-header-pic>
    </div>
    <div class="contentMain">
      <div v-if="movieItems.length === 0">
        <p>暂无电影信息</p>
      </div>
      <div class="contentLeft" v-else>
        <ul class="cont-ul">
          <movie-list v-for="movie in movieItems" :key="movie._id" :id="movie._id" :movieName="movie.movieName"
                      :movieTime="movie.movieTime"></movie-list>
        </ul>
      </div>
      <div>
        <div class="contentRight">
          <ul class="cont-ul">
            <news-list v-for="news in newsItems" :key="news._id" :id="news._id" :articleTitle="news.articleTitle"
                       :articleTime="news.articleTime">
            </news-list>
          </ul>
        </div>
      </div>
    </div>
    <common-foot></common-foot>
  </div>
</template>

<script>
import MovieIndexHeader from '../components/MovieIndexHeader'
import CommonFoot from '../components/CommonFoot'
import NewsList from '../components/NewsList'
import MovieList from '../components/MovieList'
import IndexHeaderPic from '../components/IndexHeaderPic'
import UserMessage from '../components/UserMessage'

export default {
  data() {
    return {
      headerItems: [],
      newsItems: [],
      movieItems: []
    }
  },
  components: {
    MovieIndexHeader,
    CommonFoot,
    NewsList,
    MovieList,
    IndexHeaderPic,
    UserMessage
  },
  created() {
    this.$http.get("http://localhost:3000/showIndex")
        .then((res) => {
          this.headerItems = res.data.data.slice(0, 10);
          console.log(this.headerItems);
        })
        .catch(err => {
          console.log(err);
        })

    this.$http.get("http://localhost:3000/showArticle")
        .then((res) => {
          this.newsItems = res.data.data.slice(0, 10);
          console.log(this.newsItems);
        })
        .catch(err => {
          console.log(err);
        })

    this.$http.get("http://localhost:3000/showRanking")
        .then((res) => {
          this.movieItems = res.data.data.slice(0, 10);
          console.log(this.movieItems);
        })
        .catch(err => {
          console.log(err);
        })
  }
}
</script>

<style lang="css" scoped>
.container {
  width: 100%;
  margin: 0 auto;
}

.contentMain {
  height: 50px;
}

.userMessage {
  padding-top: 60px;
  margin-top: -10px;
  margin-left: -10px;
}

.contentPic {
  padding-top: 5px;
}

.contentLeft {
  width: 60%;
  float: left;
  margin-top: 5px;
  border-top: 1px solid #000;
}

.contentRight {
  width: 38%;
  float: left;
  margin-left: 1%;
  margin-top: 5px;
  border-top: 1px solid #000;
}

.cont-ul {
  padding-top: 0.5rem;
  background-color: #fff;
}

.cont-ul::after {
  content: '';
  display: block;
  clear: both;
  width: 0;
  height: 0;
}
</style>